import { motion } from 'framer-motion'
import styled from '@emotion/styled'

const BackgroundWrapper = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
`

const Particle = styled(motion.div)`
  position: absolute;
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%);
  border-radius: 50%;
`

function BackgroundAnimation() {
  return (
    <BackgroundWrapper>
      {[...Array(20)].map((_, i) => (
        <Particle
          key={i}
          initial={{
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            scale: Math.random() * 0.5 + 0.5,
          }}
          animate={{
            x: Math.random() * window.innerWidth,
            y: Math.random() * window.innerHeight,
            transition: {
              duration: Math.random() * 10 + 10,
              repeat: Infinity,
              repeatType: "reverse",
            },
          }}
          style={{
            width: Math.random() * 100 + 50 + "px",
            height: Math.random() * 100 + 50 + "px",
            opacity: Math.random() * 0.1,
          }}
        />
      ))}
    </BackgroundWrapper>
  )
}

export default BackgroundAnimation 